<template>
	<!-- 训练营 -->
	<view class="content">
		<image :src="content.image" class="headImg" />
		<view class="infoBox">
			<text class="title">{{content.name}}</text>
			<!-- <view class="timeBox">
				<image :src="baseUrl+'time.png'" class="timeIcon" />
				<text class="timeLabel">时间：</text>
				<text class="timeInfo">{{content.start_time}}</text>
			</view> -->
			<view class="priceBox">
				<image :src="baseUrl+'price.png'" class="priceIcon" />
				<text class="priceLabel">报名费用：</text>
				<view class="priceRight">
					<text class="priceInfo">￥{{content.sell_price}}</text>
					<text class="lineation_price">￥{{content.lineation_price}}</text>
				</view>
			</view>
			<view class="addressBox">
				<image :src="baseUrl+'address.png'" class="addressIcon" />
				<text class="addressLabel">地点：</text>
				<text class="addressInfo">{{content.activity_address}}</text>
			</view>
			<view class="line"></view>
			<text class="title1">活动介绍</text>
			<!-- <u-parse :html="content.content" class="uparse"></u-parse> -->
			<u-parse :html="content.content" :show-with-animation="true"></u-parse>
		</view>
		<!-- 菜单 -->
		<view class="menuBox">
			<view class="homeBox" @click="$switchTab('/pages/course/course')">
				<image :src="baseUrl+'home.png'" class="homeImg" />
				<text class="homeLabel">首页</text>
			</view>
			<view class="collectBox">
				<image :src="baseUrl+'share.png'" class="shareImg" />
				<text class="collectLabel">分享</text>
				<button open-type="share" class="shareBtn"></button>
			</view>
			<view class="buyBox" @click="submit()">
				￥{{content.sell_price}}/立即报名
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				content: '',
				userId: '',
				goods: [],
				id: ''
			}
		},
		onShow(options) { //获取详情
			if (uni.getStorageSync('store_userId')) {
				this.userId = JSON.parse(uni.getStorageSync('store_userId')).value;
			}
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			this.id = currentPage.options.id;
			// if (currentPage.options.id > 0) { //从首页轮播来
			// 	this.$request.get(`shopapi/goods/detail?id=${this.id}visit=1`).then(res => {
			// 		console.log(res.data);
			// 		this.content = res.data.data;
			// 		let obj = {};
			// 		obj.goods_num = 1;
			// 		obj.item_id = this.content.id;
			// 		this.goods = [];
			// 		this.goods.push(obj);
			// 	})
			// 	return;
			// }
			this.$request.get(`shopapi/Goods/lists?goods_type=2`).then(res => {
				console.log(res.data);
				this.content = res.data.data.lists[0];
				let obj = {};
				obj.goods_num = 1;
				obj.item_id = this.content.specValueList[0].id;
				this.goods = [];
				this.goods.push(obj);
			})
		},
		methods: {
			submit() {
				if (!this.isLogon) {
					// 未登录，跳转到登录页面
					return this.$navto.navto('/pages/login/login'); // 假设登录页面路径为 /pages/login/login
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确认下单',
					success: (res) => {
						if (res.confirm) {
							// 下订单
							this.$request.post(`shopapi/order/placeOrder`, {
								action: "buy",
								address_id: 1,
								delivery_type: 1,
								goods: this.goods,
								order_type: 4,
								source: "buy_now",
								real_name: ' ',
								id_card: ' '
							}).then(res => {
								console.log(res.data.code);
								if (res.data.code == 1) {
									this.$request.post(`shopapi/pay/prepay`, {
										from: "order",
										order_id: res.data.data.order_id,
										order_source: 2,
										pay_way: 2,
									}).then(res => {
										console.log(res.data.code);
										if (res.data.code == 1) {
											if (res.data.data.pay_way == 3) {
												this.$toast({
													title: '报名成功'
												});
											}
											wx.requestPayment({
												timeStamp: res.data.data.config
													.timeStamp.toString(),
												nonceStr: res.data.data.config
													.nonceStr,
												package: res.data.data.config.package,
												signType: res.data.data.config
													.signType,
												paySign: res.data.data.config.paySign,
												success: (res) => {
													this.$toast({
														title: '报名成功'
													});
												},
												fail: (res) => {
													this.$toast({
														title: '报名失败'
													});
												}
											});
										} else {
											console.log(res.data);
											this.$toast({
												title: res.data.msg
											});
										}
									})
								} else {
									console.log(res.data);
									this.$toast({
										title: res.data.msg
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		onLoad() {
			this.$request.get(`shopapi/home/slideshow_list?type=15`).then(res => {
				console.log(res.data.data.lists[0].img_url)
				this.sharImage = res.data.data.lists[0].img_url;
			})
		},
		onShareAppMessage() {
			let titleArr = [];
			let title1 = '一起参加“海南肠态修复营”！';
			let title2 = '邀您参加排毒之旅！';
			let title3 = '活动很不错，一起报名？';
			titleArr.push(title1);
			titleArr.push(title2);
			titleArr.push(title3);
			const randomIndex = Math.floor(Math.random() * titleArr.length);
			return {
				title: titleArr[randomIndex],
				path: `/course/training_camp/training_camp?invite_code=${this.userInfo.code}`,
				imageUrl: this.sharImage
			}
		},
		computed: {
			formatTime() {
				if (this.content) {
					return this.content.start_time.split(' ')[0] + '至' + this.content.end_time.split(' ')[0];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	u-parse {
		font-size: 0;
		margin-bottom: 150rpx;
	}

	u-parse image {
		width: 100%;
		display: block;
		vertical-align: middle;
	}

	.shareBtn {
		position: absolute;
		width: 242rpx;
		height: 112rpx;
		left: 0;
		z-index: 1;
		opacity: 0;
	}

	.menuBox {
		position: fixed;
		width: 750rpx;
		height: 150rpx;
		bottom: 0rpx;
		background-color: #fff;
		display: flex;
		z-index: 999999;
		padding-top: 20rpx;

		.buyBox {
			width: 444rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 85rpx;
			border-radius: 40rpx;
			background-color: #f08229;
			color: #fff;
			font-size: 29rpx;
			font-weight: 500;
			text-align: center;
		}

		.collectBox {
			position: relative;
			width: 40rpx;
			height: 100%;
			margin-left: 45rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.shareImg {
				width: 33rpx;
				height: 28rpx;
				margin-top: 13rpx;
			}

			.collectLabel {
				font-size: 19rpx;
				margin-top: 15rpx;
			}
		}

		.homeBox {
			width: 40rpx;
			height: 100%;
			margin-left: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.homeImg {
				width: 33rpx;
				height: 31rpx;
				margin-top: 10rpx;
			}

			.homeLabel {
				font-size: 19rpx;
				margin-top: 13rpx;
			}
		}
	}

	.uparse {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 55rpx;
		color: #414141;
		font-family: 'ar';
		margin-bottom: 200rpx;
	}

	.title1 {
		width: 100%;
		color: #141414;
		font-size: 28rpx;
		font-family: 'am';
		margin-left: 40rpx;
		margin-bottom: 20rpx;
		display: block;
	}

	.line {
		width: 100%;
		margin-top: 78rpx;
	}

	.addressBox {
		position: relative;
		width: 670rpx;
		height: 28rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		.addressIcon {
			width: 25rpx;
			height: 28rpx;
		}

		.addressLabel {
			display: block;
			color: #141414;
			font-size: 25rpx;
			font-family: 'ar';
			margin-left: 20rpx;
		}

		.addressInfo {
			position: absolute;
			display: block;
			color: #141414;
			font-size: 25rpx;
			font-family: 'ar';
			right: 0;
		}
	}

	.priceBox {
		position: relative;
		width: 670rpx;
		height: 28rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		.priceIcon {
			width: 25rpx;
			height: 25rpx;
		}

		.priceLabel {
			display: block;
			color: #141414;
			font-size: 25rpx;
			font-family: 'ar';
			margin-left: 20rpx;
		}

		.priceRight {
			display: flex;
			right: 0;
			position: absolute;
		}

		.lineation_price {
			display: block;
			color: #999999;
			font-size: 22rpx;
			font-family: 'ar';
			right: 0;
			line-height: 14px;
			margin-top: 7rpx;
			text-decoration: line-through;
		}

		.priceInfo {
			display: block;
			color: #f08329;
			font-size: 28rpx;
			font-family: 'ar';
			margin-right: 10rpx;
		}
	}

	.timeBox {
		position: relative;
		width: 670rpx;
		height: 25rpx;
		margin-left: 40rpx;
		margin-top: 80rpx;
		display: flex;
		align-items: center;

		.timeIcon {
			width: 25rpx;
			height: 25rpx;
		}

		.timeLabel {
			display: block;
			color: #141414;
			font-size: 25rpx;
			font-family: 'ar';
			margin-left: 20rpx;
		}

		.timeInfo {
			position: absolute;
			display: block;
			color: #141414;
			font-size: 25rpx;
			font-family: 'ar';
			right: 0;
		}
	}

	.infoBox {
		position: relative;
		width: 100%;
		background-color: #fff;
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 80rpx;
		z-index: 2;

		.title {
			width: 100%;
			color: #141414;
			font-size: 50rpx;
			font-family: 'am';
			margin-left: 40rpx;
		}
	}

	.headImg {
		position: relative;
		width: 100%;
		height: 446rpx;
		z-index: 1;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #fff;
	}

	/deep/ page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>